<template>
  <div class="cms-post-add-or-up">
    <el-row>
      <el-col :span="18">
        <p class="nav-top">撰写新文章</p>
        <el-input class="input-title" v-model="title" placeholder="在此输入标题"></el-input>
        <script :id="ueId" class="ueditor-box" type="text/plain" style="width: 100%; height: 260px;">hello world!</script>
        <!-- 获取内容 -->
        <p>
          <el-button @click="getContent()">获得内容</el-button>
        </p>
        <el-dialog title="内容" :visible.sync="dialogVisible" :append-to-body="true">
          {{ ueContent }}
          <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
        </el-dialog>
      </el-col>
      <el-col :span="6" class="right-content">
        <el-collapse class="margin-bottom10 collapse" @change="handleChange">
          <el-collapse-item>
            <template slot="title">
              <div class="collapse-top">
                                标签
              </div>
            </template>
            <div class="collapse-content">标签</div>
          </el-collapse-item>
        </el-collapse>
        <el-collapse class="margin-bottom10 collapse" @change="handleChange">
          <el-collapse-item>
            <template slot="title">
              <div class="collapse-top">形式</div>
            </template>
            <div class="collapse-content">
                            形式
            </div>
          </el-collapse-item>
        </el-collapse>
        <el-collapse class="collapse" @change="handleChange">
          <el-collapse-item>
            <template slot="title">
              <div class="collapse-top">发布</div>
            </template>
            <div class="publish">
              <div style="overflow: hidden;">
                <el-button class="float-left" size="small">保存草稿</el-button>
                <el-button class="float-right" size="small">预览</el-button>
              </div>
              <p><i class="el-icon-tickets"></i>状态:<strong>草稿</strong></p>
              <p><i class="el-icon-view"></i>公开度:<strong>公开</strong></p>
              <div class="publish-bottom">
                <el-button type="primary" class="float-right" size="small">发布</el-button>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import ueditor from "ueditor";
  export default {
    data() {
      return {
        ue: null,
        ueId: `J_ueditorBox_${new Date().getTime()}`,
        ueContent: "",
        dialogVisible: false,
        title: ""
      };
    },
    mounted() {
      this.ue = ueditor.getEditor(this.ueId, {
        // serverUrl: '', // 服务器统一请求接口路径
        zIndex: 3000
      });
    },
    methods: {
      getContent() {
        this.dialogVisible = true;
        this.ue.ready(() => {
          this.ueContent = this.ue.getContent();
        });
      },
      handleChange(val) {
        console.log(val);
      }
    }
  };
</script>

<style lang="scss">
  .cms-post-add-or-up {
    position: relative;
    z-index: 510;
    >.el-alert {
      margin-bottom: 10px;
    }
    .nav-top {
      font-size: 24px;
      font-weight: bold;
    }
    .right-content {
      padding-left: 20px;
    }
    .input-title {
      margin-bottom: 12px;
    }
    .collapse-top {
      font-weight: bolder;
      color: black;
      text-indent: 1em;
    }
    .float-left {
      float: left;
    }
    .float-right {
      float: right;
    }
    .margin-bottom10 {
      margin-bottom: 10px;
    }
    .collapse {
      border: 1px solid #EBEEF5;
    }
    .collapse-content {
      text-indent: 1em;
    }
    .publish-bottom {
      background-color: #F5F5F5;
      overflow: hidden;
      padding: 8px;
    }
    .publish {
      i{
        margin-left: 4px;
        margin-right: 4px;
      }
    }
  }
</style>
